<template>
	<view class="waikuang">
		<view class="toubu">
			<image class="sdlogo" :src="imgUrl + mendData.image[0]" mode="aspectFill"></image>
			<view class="falxx">
				<view class="dianmc">{{mendData.mdname}}</view>
				<view v-if="mendData.state == 1">营业中</view>
				<view v-if="mendData.state == 0">打烊</view>
			</view>
		</view>
		<view class="toubu">
			<image class="yyshij" src="../../static/yuyuea.png"></image>
			<view class="jiexwz">营业时间：{{mendData.hours}}</view>
		</view>
		<view class="toubu">
			<image class="yyshij" src="../../static/weiz.png"></image>
			<view class="jiexwz">{{mendData.city + mendData.area + mendData.address}}</view>
		</view>
		<view class="toubu" @click="handleImages()">
			<image class="yyshij" src="../../static/xiangc.png"></image>
			<view class="jiexwz">环境相册</view>
			<view class="huanjxc">
				<image class="xmdax" v-for="(item,index) in mendData.image" :key="index" :src="imgUrl + item" mode="aspectFill"></image>
			</view>
		</view>
		<!-- <view class="liuypinl">
			<view class="liybt">评论留言</view>
			<view class="liuyanq">
				<view>暂无留言</view>
			</view>
		</view> -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				mendData: {},
				imgUrl: getApp().globalData.imgUrl,
			}
		},
		onLoad(o) {
			this.getMendxq(o.id);
		},
		methods: {
			getMendxq(id) {
				uni.request({
					url: getApp().globalData.url+'/client/GetMendxq',
					data:{
						id: id,
					},
					method: "GET",
					header: {
						"Content-Type": "application/json"
					},
					success: (res) => {
						this.mendData = res.data.data;
					}
				})
			},
			handleImages() {
				let list = [];
				this.mendData.image.forEach(item => {
					list.push(this.imgUrl + item);
				})
				uni.previewImage({
					urls: list,
					loop: true,
					indicator: "number",
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
	.waikuang{
		width: 710rpx;
		padding: 20rpx;
		.toubu{
			display: flex;
			align-items: center;
			margin-bottom: 20rpx;
			padding-bottom: 20rpx;
			border-bottom: solid 1rpx #e7e7e7;
			.yyshij{
				width: 35rpx;
				height: 35rpx;
				margin-right: 10rpx;
			}
			.jiexwz{
				font-size: 28rpx;
				color: #5e5e5e;
			}
			.huanjxc{
				display: flex;
				align-items: center;
				margin-left: 20rpx;
				.xmdax{
					width: 60rpx;
					height: 60rpx;
					margin-left: 10rpx;
				}
			}
			.sdlogo{
				width: 120rpx;
				height: 120rpx;
				border-radius: 20rpx;
				margin-right: 20rpx;
			}
			.falxx{
				font-size: 28rpx;
				color: #565656;
				.dianmc{
					font-size: 40rpx;
					font-weight: bold;
					color: #111111;
					margin-bottom: 10rpx;
				}
			}
		}
		.liuypinl{
			font-size: 28rpx;
			.liybt{
				font-size: 35rpx;
				font-weight: bold;
				color: #e3b84b;
				margin-bottom: 20rpx;
			}
		}
	}
</style>
